<template>
  <div class="songdetail">
    <div
      class="detail"
      :style="{ background: 'url(' + songDetail.al.picUrl + ') ' }"
    >
      <div class="container">
        <h1 class="biaoti">{{ songDetail.name }}</h1>
        <div class="detail-play">
          <div class="teshutu">
            <img src="../../assets/needle.png" alt="" />
          </div>
          <img :class="{ an: !isShow }" :src="songDetail.al.picUrl" alt="" />
          <div class="bf" @click="isShow = !isShow">
            <van-icon @click="musicPlay" v-show="isShow" name="play-circle-o" />
            <van-icon
              @click="musicPause"
              v-show="!isShow"
              name="pause-circle-o"
            />
          </div>
        </div>
        <audio
          :src="songUrl"
          class="media-audio"
          loop
          autoplay
          ref="MusicPlay"
        ></audio>
        <!-- 歌词 -->
        <div class="detail-lyric">
          <ul class="detail-lyric-wrap">
            <li
              class="detail-lyric-item"
              v-for="(item, index) in songLyricc"
              :key="index"
            >
              {{ item.ly }}
            </li>
            <!-- <div class="detail-lyric-item active">测试文字测试文字</div>
            <div class="detail-lyric-item">测试文字</div> -->
          </ul>
        </div>
        <!-- <div class="detail-like"> -->
        <!-- <div class="detail-like-head"></div> -->
        <!-- 相关歌曲推荐 -->
        <!-- <h1 class="gequtuijian">相关歌曲推荐</h1>
          <div
            class="detail-like-item"
            v-for="(item, index) in songSimi"
            :key="index"
          >
            <div class="detail-like-img">
              <img src="item.album.blurPicUrl" alt="" />
            </div>
            <div class="detail-like-song">
              <div class="ts">{{ item.name }}</div>
              <div>
                <img src="../../assets/OIP-C (1).jpg" alt="" />
                <img src="../../assets/OIP-C.jpg" alt="" />
                {{ item.album.artists[0].name }}-{{ item.name }}
              </div>
            </div>
            <div class="tb"><van-icon name="play-circle-o" /></div>
          </div> -->
        <!-- 精彩评论
          <div
            class="detail-comment-item"
            v-for="(i, index) in songComment"
            :key="index"
          >
            <div class="detail-comment-img"></div>
            <img :src="i.user.avatarUrl" alt="" /> -->

        <!-- <div class="detail-comment-content">
              <div class="detail-comment-title">
                <div class="detail-comment-name">
                  <div>{{ i.user.nickname }}</div>
                  <div>{{ i.time }}</div>
                </div>
                <div class="detail-comment-like">
                  3242321<van-icon name="good-job-o" />
                </div>
                <div class="detail-comment-text">测试文字</div>
              </div>
            </div> -->
        <!-- </div> -->
        <!-- </div> -->
      </div>
      <!-- <h1>{{ songUrl.name }}</h1> -->
    </div>
  </div>
</template>

<script>
// import axios from "axios";

import { loadMusicAPI, songSimi, songLyric, songUrl } from "../../api/home";
// import aplayer from "vue-aplayer";
export default {
  name: "Songdetail",
  data() {
    return {
      isShow: false,
      songDetail: { al: {} },
      songSimi: [],
      songComment: [],
      songLyricc: [],
      songUrl: {},
    };
  },
  components: {
    // aplayer,
  },
  created() {
    this.getMusic();
  },
  methods: {
    huitui() {
      this.$router.go(-1);
    },
    musicPause() {
      this.$refs.MusicPlay.pause();
      this.musicTF = true;
    },
    musicPlay() {
      this.$refs.MusicPlay.play();
      this.musicTF = false;
    },
    async getMusic() {
      // 歌
      console.log(this.$route.params.id);
      const resl = await loadMusicAPI(this.$route.params.id);
      console.log(resl);
      this.songDetail = resl.data.songs[0];
      console.log(this.$route.query.id);
      //歌词
      const geCi = await songLyric(this.$route.params.id);
      console.log(geCi);
      let ly = geCi.data.lrc.lyric;
      console.log(geCi.data.lrc.lyric);
      //正则表达式
      let re = /\[([^\]]+)\]([^[]+)/g;

      var result = [];
      ly.replace(re, ($0, $1, $2) => {
        result.push({ time: $1, ly: $2 });
      });
      this.songLyricc = result;
      //相关歌曲推荐
      const Su = await songUrl(this.$route.params.id);
      this.songUrl = Su.data.data[0].url;
      //歌曲推荐
      const sS = await songSimi(this.$route.params.id);
      this.songSimi = sS.data.songs;

      //评论
      // console.log(this.$route.params.id);
      // const sC = await songComment(this.$route.params.id);
      // console.log(sC);
      // if (sC[2][0].data.code == "200") {
      //   this.songComment = sC[2][1].data.hotComments;
      //   console.log(songComment);
      //   console.log(sC[2][1].data.hotComments);
      // }
      //歌
    },
  },
};

// export default {
//   data() {
//     return {};
//   },
//   computed: {},
//   watch: {},

//   methods: {},
//   created() {
//     const ids = this.$route.params.id;
//     console.log(ids);
//     //获取歌曲详情
//     axios.get(`http://localhost:3000/song/detail?ids=${ids}`).then((res) => {
//       console.log("歌曲详情", res);
//     });
//   },
//   mounted() {},
//   components: {},
// };
</script>
<style scoped>
.gequtuijian {
  font-size: 17px;
  color: #fff;
  font-weight: normal;
  padding: 16px 0;
}

.wu {
}
/* 动画 */
@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
  }
}

.an {
  -webkit-transform: rotate(360deg);

  animation: rotation 3s linear infinite;

  -moz-animation: rotation 3s linear infinite;

  -webkit-animation: rotation 20s linear infinite;

  -o-animation: rotation 3s linear infinite;
}
/* 歌曲上面的小图 */
.teshutu {
  position: absolute;
  left: 40px;
  z-index: 30;
  top: 20px;
}
.biaoti {
  height: 33px;
  font-weight: normal;
  margin: 0;
  font-size: 20px;
  text-align: center;
  color: #fff;
  border-bottom: 1px solid #fff;
  position: relative;
}
.detail {
  background: url("../../assets/R-C.jpg");
}
.detail-play {
  width: 290px;
  height: 290px;
  background-image: url("../../assets/disc.png");
  background-size: cover;
  margin: 80px auto 0 auto;
  position: relative;
}
.detail-play img {
  height: 185px;
  width: 185px;
  border-radius: 50%;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
}
.detail-play .bf {
  width: 50px;
  height: 50px;
  font-size: 50px;
  color: white;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
}
/* 歌词 */
.detail-lyric {
  font-size: 16px;
  line-height: 41px;
  height: 350px;
  text-align: center;
  overflow: auto;
  color: #fff;
}
.detail-lyric-item {
  height: 41px;
}
.detail-lyric-item.active {
  color: white;
}
.detail-like {
  margin: 0 15px;
}
.detail-like-head {
  font-size: 18px;
  color: #fff;
  margin: 25px 0;
}
.detail-like-item {
  display: flex;
  align-items: center;
  margin-bottom: 14px;
}
.detail-like-img {
  width: 41px;
  height: 41px;
  border-radius: 10px;
  overflow: hidden;
  margin-right: 10px;
}
.detail-like-img img {
  width: 100%;
  height: 100%;
}
.detail-like-song {
  flex: 1;
  color: #c6c2bf;
}
.detail-like-song img {
  width: 13px;
  height: 10px;
  margin-right: 5px;
}
.detail-like-item .ts {
  font-size: 14px;
  margin-bottom: 6px;
}
.detail-like-item .tb {
  font-size: 25px;
  color: #6f6e73;
}

/* 评论 */
.detail-comment-item {
  display: flex;
  margin-bottom: 14px;
}
.detail-comment-img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 9px;
}
.detail-comment-img img {
  width: 100%;
  height: 100%;
}
.detail-comment-content {
  flex: 1;
  color: #c6c2bf;
}
.detail-comment-title {
  display: flex;
  justify-content: space-between;
}
.detail-comment-name {
  color: #c6c2bf;
}
.detail-comment-name div:nth-child(1) {
  font-size: 13px;
}
.detail-comment-name div:nth-child(1) {
  font-size: 10px;
}
.detail-comment-like {
  font-size: 14px;
}
.detail-comment-text {
  color: #fff;
  line-height: 20px;
  margin-top: 10px;
  border-bottom: 1px #e0e0e0 solid;
  padding-bottom: 20px;
}
</style>
